<template>
  <div class="full relative">
    <video class="w_full h_full-55 border_radius_10" v-show="showFlv" autoplay controls id="videoElement"></video>

    <div class="full" v-show="showM3u8">
      <video
        ref="video"
        id="videoElement"
        v-show="showM3u8"
        class="video_view video-js vjs-default-skin vjs-big-play-centered border_radius_10"
        controls
      >
        <source v-show="showM3u8" :src="videoUrl" id="targetVideo" />
      </video>
    </div>
    
    <!-- 先择监控按钮 -->
    <div class="ph_5 absolute bottom_5 left_5" v-if="!isShowVedioList">
      <button 
        class="p_8 border_none border_radius_3 color_000 main_bgc cursor" 
        @click="showVedioList()">全部监控
      </button>
    </div>

    <!-- 监控列表 -->
    <div 
      class="full absolute top_0 left_0 z_999" 
      v-if="isShowVedioList"
    >
      <div 
        class="full flex_wrap flex_row_start scroll_box overflow_y_auto bgc_212121" 
        v-if="videoList && videoList.length"
      >
        <div 
          class="w_33_3_p cursor p_5" 
          v-for="(item, index) in videoList" :key="index"
          @click="chooseVedio(item.url, index)"
        >
          <div class="w_full p_5 main_border border_radius_5">
            <img class="w_full object_fit_cover color_fff" v-if="muHuId == 275 && index == 0" src="@/assets/images/def/def-img.png">
            <img class="w_full object_fit_cover color_fff" v-if="muHuId == 275 && index == 1" src="@/assets/images/def/def-img.png">
            <img class="w_full object_fit_cover color_fff" v-if="muHuId == 275 && index == 2" src="@/assets/images/def/def-img.png">
            <img class="w_full object_fit_cover color_fff" v-if="muHuId == 275 && index == 3" src="@/assets/images/def/def-img.png">
            <img class="w_full object_fit_cover color_fff" v-if="muHuId == 275 && index == 4" src="@/assets/images/def/def-img.png">
            <img class="w_full object_fit_cover" v-else :src="item.img">

            <div class="color_fff text_center color_fff mt_5">{{ item.title }}</div>
          </div>
          
        </div>
      </div>
      
      <div class="full relative bgc_212121" v-else>
        <div class="p_10 text_center absolute_center fs_24 border_radius_15 bgc_eee">该牧场没有接入监控设备 或 关闭监控</div>
      </div>
    </div>
  </div>
</template>

<script>
  import flvjs from 'flv.js'

  export default {
    name: 'PlayVideo',

    props: {
      muHuId: '',
      videoList: [],
    },

    data() {
      return {
        activeName: '0',
        isShowVedioList: true,

        showFlv: false,
        showM3u8: true,

        player: null, // 用来存储当前 video

        videoUrl: '',
      }
    },

    mounted() { 
      this.initVideo()
    },

    watch: {
      muHuId(newval) {
        this.isShowVedioList = false
      },  
      videoList: {
        handler(newVal, oldVal) {
          // debugger   // 此处 无法监听 debugger
          this.videoUrl = ''

          // 显示 监控画面
          this.playVedio(newVal[0].url)
          // this.playVedio('https://open.ys7.com/v3/openlive/FG8360569_7_1.m3u8?expire=1758356970&id=759089207263309824&t=1c84c0c192827ff6cd79a247533ee10dba97c2672806c7caf8e1a8e35cb5da9d&ev=100')
        },
        deep: true,
        immediate: true
      },
    },

    methods: {
      // 获取 Vedio List 
      getVideoList() {
        this.$bus.$on('sendVideoList', (val) => {
          // console.log('获取 Vedio List : ', val);
          this.isShowVedioList = false
          this.videoList = val
          this.url = val[0].url
        })
      },

      chooseVedio(src) {
        this.isShowVedioList = false
        var myPlayer = videojs(this.$refs.video);
        myPlayer.src([
          {
            type: "application/x-mpegURL",
            src
          }
        ]);

        myPlayer.play();
      },

      initVideo() {
        this.player = this.$video(this.$refs.video, { autoplay: true })
      },

      // 显示监控列表
      showVedioList() {
        this.isShowVedioList = true
      },
      
      // 播放视频
      playVedio(src) {
        let formatIndex = src.search(/\?/i);

        let format = src.slice(formatIndex-4, formatIndex)

        // console.log(format);    // m3u8 .flv

        // 播放 .flv 格式的视频
        if (format == '.flv') {
          this.showFlv = true
          this.showM3u8 = false

          var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: src
          });

          var videoElement = document.getElementById('videoElement');

            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();

          } else {
            this.showFlv = false
            this.showM3u8 = true

            // 播放 .m3u8 格式的视频
            let options = {
              src,
              autoplay: true,
              type: 'application/x-mpegURL'
            }

            this.player.src(options);
            this.player.load();
          }
        },

      // 切换视频
      chooseVedio(src, index2) {
        this.isShowVedioList = false

        let formatIndex = src.search(/\?/i);

        let format = src.slice(formatIndex-4, formatIndex)

        // console.log(format);    // m3u8 .flv

        // 播放 .flv 格式的视频
        if (format == '.flv') {
          this.showFlv = true
          this.showM3u8 = false

          var flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: src
          });

          var videoElement = document.getElementById('videoElement');

          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();

        } else {
          this.showFlv = false
          this.showM3u8 = true
        // 播放 .m3u8 格式的视频
          let options = {
            src,
            autoplay: true,
            type: 'application/x-mpegURL'
          }

          this.player.src(options);
          this.player.load();
        }
      },

    }
  }


</script>

<style scoped lang="less">
.activeBtn { color: red; }

.video_box {
  width: 100%;
  height: 100%;
  position: relative;
  // border: 1px solid red;

  .video_view { width: 100%; height: calc(100% - 55px); border-radius: 10px !important; }

  .m3u8_box {
    width: 100%;
    height: 100%;
  }

  .btn_box {
    padding: 0 5px;
    position: absolute;
    bottom: 5px;
    left: 0px;
    font-size: 20px;

    .choose_btn {
      padding: 5px 10px;
      border: none;
      border-radius: 3px; 
      background-color: #000000c2;
      color: #bdaa9c;
    }
    .choose_btn:hover { cursor: pointer; }
  }

  .videoListBox {
    width: 50%;
    height: 90%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #eee;
    background-color: rgba(#212121, 0.8);
    color: #fff;
    border-radius: 5px;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;

    .video_item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .video_item:hover { cursor: pointer; }
  }
}
</style>

<style>
.el-tabs__item { color: #fff !important; text-align: center !important; }
.el-tabs__item.is-active { color: #409eff !important; }
</style>

